<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <div>姓：<input type="text" v-model="firstName"></div>
        <div>名：<input type="text" v-model="lastName"></div>
        <!-- 计算属性使用的时候和普通属性一样 -->
        <div>姓名: {{fullName}}</div>
        <div>姓名: {{fullName}}</div>
        <button @click="alertName">弹出名字</button>
        <h3>{{getName()}}</h3>
        <h3>{{getName()}}</h3>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstName: '',
                lastName: ''
            },
            // 当我们界面上有一些属性，是需要通过别的属性计算得到的话，我们可以通过计算属性来定义
            computed: {
                // 计算属性定义是定义成函数的形式
                fullName(){
                    // 返回的值就是这个属性的值
                    // 计算属性会做缓存，只有它依赖的数据变化的时候才会重新计算
                    console.log("***********************计算属性运行***********************");
                    return this.firstName + this.lastName
                }
            },
            methods: {
                alertName(){
                    alert(this.fullName)
                },
                getName(){
                    console.log("#######################方法运行#######################");
                    return this.firstName + this.lastName
                }
            },

        })
    </script>
</body>

</html>